<%@ page import="com.zwy.Shopping.model.User" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.bundle.js"></script>
    <meta charset="UTF-8">
    <title>用户个人信息修改</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/messages_zh.js"></script>
    <script>
        $(function () {
            $("#userInfoForm").validate({
                rules: {
                    username: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    mobile: {
                        required: true,
                        number: true,
                        rangelength: [11, 11]
                    }

                },
                messages:{
                    username:"用户名不能为空",
                    email: {
                        required:"邮箱不能为空",
                        email:"邮箱格式有误"
                    },
                    mobile:{
                        required:"手机号不能为空",
                        number:"手机号必须为数字",
                        rangelength:"手机号必须为11位"
                    }
                }
            });
            $("#userInfoForm").on("submit", function(event) {
                // 调用 .valid() 方法进行验证
                if (!$(this).valid()) {
                    // 如果验证失败，阻止表单提交
                    event.preventDefault();
                }
            });
        });
    </script>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>
<div class="container-fluid mt-3 d-flex">
    <div class="card m-auto w-25 d-flex bg-light">
        <div class="card-img-top m-auto d-flex "><img src="img/user.png" class="img-thumbnail m-auto"></div>
        <div class="card-title m-auto">用户信息修改</div>
        <%
            User user = (User) request.getSession().getAttribute("user");
        %>
        <div class="card-footer m-auto">
            <form id="userInfoForm" class="form-control" method="get" action="modify_user_info">
                <div class="form-group">
                    <label>用户名:</label>
                    <input class="form-control" type="text" name="username" value="<%=user.getName()%>">
                </div>
                <div class="form-group">
                    <label>手机号:</label>
                    <input class="form-control" type="text" name="mobile" value="<%=user.getMobile()%>">
                </div>
                <div class="form-group">
                    <label>地址:</label>
                    <input class="form-control" type="text" name="address" value="<%=user.getAddress()%>">
                </div>
                <div class="form-group">
                    <label>邮箱:</label>
                    <input class="form-control" type="text" name="email" value="<%=user.getEmail()%>">
                </div>
                <div class="form-group mt-4">
                    <button class="btn btn-primary" type="submit">修改</button>
                    <a class="btn btn-secondary" href="userInfo.jsp">取消修改</a>
                </div>


            </form>
        </div>
    </div>
</div>
</body>
</html>